let _Vue = null

export default class VueRouter {
    static install (Vue) {
        //1. 判断当前插件是否已经被安装
        if (VueRouter.install.installed) {
            return
        }

        VueRouter.install.installed = true
        //2.把vue构造函数记录到全局变量
        _Vue = Vue
        //3.把创建vue实例时候传入的router对象注入到vue实例上
        // 混入
        _Vue.mixin({
            beforeCreate() {
                if(this.$options.router) {
                    _Vue.prototype.$router = this.$options.router
                    this.$options.router.init()
                }
            }
        })
    }

    constructor(options) {
        this.options = options
        this.routeMap = {}
        // vue提供的observable方法，用来创建响应式对象
        this.data = _Vue.observable({
            current: '/'
        })
    }

    init() {
        this.createRouteMap();
        this.initComponents(_Vue);
        this.initEvent ();
    }

    createRouteMap() {
        //把routes解析成map存储在routeMap
        this.options.routes.forEach(route=> {
            this.routeMap[route.path] = route.component
        })
    }

    initComponents(Vue) {
        // 创建组件
        Vue.component('router-link', {
            props: {
                to: String
            },
            methods: {
                clickHandler (e) {
                    const { mode = 'hash' } = this.$router.options
                    
                    if ( mode === 'history' ) {
                        history.pushState({}, '' , this.to)
                    } else if ( mode === 'hash' ) {
                        window.location.hash = this.to
                    }
                    
                    this.$router.data.current = this.to
                    e.preventDefault()
                }
            },
            template: '<a :href="to" v-on:click="clickHandler"><slot></slot></a>',
            //如果不用template也可以使用render函数
            // render(h) {
            //     return h('a', {
            //         attrs: {
            //             href: this.to
            //         }
            //     }, [this.$slots.default])
            // }
        })
        
        const _this = this
        Vue.component('router-view', {
            render(h) {
                return h(_this.routeMap[_this.data.current])
            }
        })
    }

    initEvent () {
        const { mode = 'hash' } = this.options
        // 浏览器的前进后退，动态渲染组件
        if( mode==='history' ) {
            window.addEventListener('popstate', ()=> {
                this.data.current = window.location.pathname
            })
        } else if ( mode==='hash' ) {
            window.addEventListener('hashchange', ()=> {
                const hash = window.location.hash
                const reg = /#(.+)(\?.*)*/
                if(reg.test(hash)) {
                    this.data.current = RegExp.$1
                }
            }, false)
        }
    }
}